<template>
  <div class="nav-card">
    <div v-for="(item, index) in list" :key="item.name" :class="['nav-card-item animate__animated animate__backInRight wow', { 'nav-card-item-active': initIndex === index }]" data-wow-duration="1s" @click="changeMenu(item.name, index)">
      <div>
        <img :src="item.icon" alt="" class="nav-icon border-radius-30">
      </div>
      <p class="nav-card-name">{{ item.name }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick } from 'vue'
import { WOW } from 'wowjs' // wow加载后，animate.css与自定义transform不冲突了

export default defineComponent({
  props: {
    list: {
      type: Array
    },
    initIndex: {
      type: Number
    }
  },
  setup (props, { emit }) {
    nextTick(() => {
      const wow = new WOW({
        live: false
      })
      wow.init()
    })

    const changeMenu = (name: string, index: number) => {
      emit('send-message', name, index)
    }

    return {
      changeMenu
    }
  }
})
</script>

<style lang="scss">
.nav-card {
  box-sizing: border-box;
  height: 3.81rem;
  padding: .54rem 1.48rem;
  background: #313540;
  border-radius: .4rem;
  display: flex;
  // justify-content: space-between;
  gap: 2rem;
  img.nav-icon {
    width: 2rem;
    height: 2rem;
  }
  .nav-card-item {
    text-align: center;
    transition: all 1s;
    .nav-card-name {
      font-family: Arial;
      font-size: .4rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: .76rem;
      letter-spacing: 0rem;
      color: #ffffff;
      margin-top: .2rem;
    }
  }
  .nav-card-item-active {
    margin-top: -.2rem;
    transition: all 1s;
    .nav-card-name {
      color: #00b0ff;
    }
  }
}
</style>
